<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>audioMotion-analyzer UMD minimal demo</title>
	<link href="https://fonts.googleapis.com/css?family=Orbitron:900" rel="stylesheet">
	<link href="styles.css" rel="stylesheet">
</head>

<body>
	<header>
		<h1><a href="https://audiomotion.dev" class="logo">audioMotion-analyzer</a> | UMD minimal demo</h1>
		<ul class="header-nav">
			<li><a href="index.html">Demos</a></li>
            <li><a href="https://audiomotion.dev">Home</a></li>
			<li><a href="https://github.com/hvianna/audioMotion-analyzer/blob/master/demo/minimal.html">View on GitHub</a></li>
		</ul>
	</header>

	<div id="container">
		<div id="notice">
			<p>
				This demonstrates the usage of the UMD module.
			</p>

			<p>
				The module is included with <code>&lt;script src="https://unpkg.com/audiomotion-analyzer/dist"&gt;&lt;/script&gt;</code>
				<br>and the class is available via <code>AudioMotionAnalyzer</code> global.
			</p>

			<button id="btn_start">Start audioMotion</button>
		</div>
	</div>
	<div id="audio-container"></div>
	<div id="message" class="box center"></div>
	<div><button id="btn_destroy">Destroy audioMotion</button></div>
	<div class="credits">
		<strong>audioMotion-analyzer</strong> v<span id="version"></span></strong> Copyright &copy; 2018-2025 Henrique Avila Vianna. Source code available on <a href="https://github.com/hvianna/audioMotion-analyzer">GitHub</a>.
		Live stream: <a href="https://federalfm.ufpel.edu.br">Rádio Federal FM</a>.
	</div>

	<script src="https://unpkg.com/audiomotion-analyzer/dist"></script>
	<script>
		const container      = document.getElementById('container'),
			  audioContainer = document.getElementById('audio-container'),
			  destroyButton  = document.getElementById('btn_destroy'),
			  startButton    = document.getElementById('btn_start'),
			  messageDiv     = document.getElementById('message'),
		      noticeDiv      = document.getElementById('notice');

		destroyButton.addEventListener( 'click', destroy );
		startButton.addEventListener( 'click', initialize );

		document.getElementById('version').innerText = AudioMotionAnalyzer.version;

		let audioEl, audioMotion; // global variables for the audio element and analyzer object

		console.log( 'AudioMotionAnalyzer global:\n\n', AudioMotionAnalyzer );

		function initialize() {
			// create new <audio> element
			audioEl = new Audio('https://radio4.cdm-radio.com:18004/stream-mp3-Zen');
			audioEl.controls = true;
			audioEl.crossOrigin = 'anonymous';
			audioEl.onloadstart  = () => messageDiv.innerText = 'Buffering audio... please wait...';
			audioEl.onloadeddata = () => {
				messageDiv.innerText = '';
				audioEl.play();
			}
			audioContainer.append( audioEl ); // add it to the DOM

			// create audioMotion instance and use the audio element as source
			audioMotion = new AudioMotionAnalyzer( container, {
				source: audioEl,
				// set your preferred options here
			});

			noticeDiv.style.display = 'none';
			destroyButton.style.display = 'block';
		}

		function destroy() {
			// stop audio element and remove it from the DOM
			audioEl.pause();
			audioEl.remove();

			// destroy audioMotion instance
			audioMotion.destroy();

			console.log( 'isOn: ', audioMotion.isOn );
			console.log( 'isDestroyed: ', audioMotion.isDestroyed );
			console.log( 'AudioContext state: ', audioMotion.audioCtx.state );

			// clear references to objects so they can be released from memory
			audioMotion = null;
			audioEl = null;

			noticeDiv.style.display = '';
			destroyButton.style.display = '';
		}
	</script>

</body>
</html>
